<template>
	<view class="col" style="position: relative;margin-top: 10px;padding: 15rpx;">
		<view class="row-center">
			<view class="avater-box">
				<view class="avater">
				</view>
				<image src="/static/images/edit-camera.svg" class="avater-camera" @click="showAvater = true"></image>
			</view>
		</view>


		<view class="row-between-center">
			<view class="key">
				名字
			</view>
			<view class="row-h-center" @click="showInputM(0)">
				<view class="value">{{info.nickName}}</view>
				<image src="/static/images/edit-arrow-right.png" class="arrow"></image>
			</view>
		</view>

		<view class="row-between-center" style="margin-top: 50rpx;">
			<view class="key">
				账号
			</view>
			<view class="row-h-center" @click="showInputM(1)">
				<view class="value">{{info.phonenumber}}</view>
				<image src="/static/images/edit-arrow-right.png" class="arrow"></image>
			</view>
		</view>

		<view class="row-between-center" style="margin-top: 50rpx;">
			<view class="key">
				性别
			</view>
			<view class="row-h-center" @click="showSex = true">
				<view class="value">{{info.sex==0?'男':'女'}}</view>
				<image src="/static/images/edit-arrow-right.png" class="arrow"></image>
			</view>
		</view>

		<view class="row-between-center" style="margin-top: 50rpx;" @click="showBirth = true">
			<view class="key">
				生日
			</view>
			<view class="row-h-center">
				<view class="value">{{info.birthday}}</view>
				<image src="/static/images/edit-arrow-right.png" class="arrow"></image>
			</view>
		</view>

		<view class="row-between-center" style="margin-top: 50rpx;" @click="selectBg()">
			<view class="key">
				背景
			</view>
			<view class="row-h-center">
				<view class="value"></view>
				<image src="/static/images/edit-arrow-right.png" class="arrow"></image>
			</view>
		</view>

		<u-popup :show="showInput"  mode="bottom" round="15">
			<view class="info col" style="padding: 15rpx 30rpx;">
				<view class="row-between-center" style="margin-top: 15rpx;">
					<image class="close" src="/static/images/bill_close.png" @click="showInput=false"></image>
					<view class="title">{{editInputItem.title}}</view>
					<view class="close" @click="showInput=false"></view>
				</view>
				<view style="height: 80rpx;margin-top: 80rpx;">
					<u-input border="bottom" :placeholder="editInputItem.place" :maxlength="20"
						v-model="content"></u-input>
				</view>

				<view class="row-between-center" style="margin-top: 10rpx;">
					<view class="tip">
						{{editInputItem.tip}}
					</view>
					<view class="tip">
						{{content.length}}/{{editInputItem.limit}}
					</view>
				</view>

				<view class="row-between-center" style="margin: 60rpx;">
					<view class="cancel row-center" @click="showInput = false">
						取消
					</view>
					<view class="sure row-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :actions="sex" :show="showSex" cancelText="取消" :closeOnClickAction="true" @select="selectClick"
			:closeOnClickOverlay="true" @close="showSex=false">
		</u-action-sheet>
		<u-datetime-picker @cancel="showBirth=false" @confirm="selectBirth" :show="showBirth" v-model="birth"
			mode="date"></u-datetime-picker>


		<u-popup :show="showBg"  mode="bottom" round="15">
			<view class="info col">
				<view class="row-between-center" style="margin: 15rpx;">
					<image class="close" src="/static/images/bill_close.png" @click="showBg = false"></image>
					<view class="title">选择背景</view>
					<view class="close" @click="showBg=false"></view>
				</view>
				<scroll-view :scroll-y="true">
					<view style="height: 1010rpx;padding: 0 30rpx;">
						<view class="row-wrap" style="width: 100vw;">
							<view class="bg-item row-center col" v-for="item in 3">
								<view class="bg-img">
								</view>
								<image src="/static/images/radio_y_blue.png" class="bg-radio"></image>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="row-between-center"
					style="background-color: #f8f8f8;height: 100rpx;padding-left: 30rpx;padding-right: 30rpx;">
					<view class="cancel row-center" @click="showBg = false">
						取消
					</view>
					<view class="sure row-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup :show="showAvater"  mode="bottom" round="15">
			<view class="info col">
				<view class="row-between-center" style="margin: 15rpx;">
					<image class="close" src="/static/images/bill_close.png" @click="showInput=false"></image>
					<view class="title">选择头像</view>
					<view class="close" @click="showAvater=false"></view>
				</view>
				<scroll-view :scroll-y="true">
					<view style="height: 1010rpx;padding: 0 30rpx;">
						<view class="row-wrap " style="margin-left: 2vw;">
							<view class="avater-item" v-for="item,index in 10" :style="index/3==1 ?'':'margin-right:2vw'"></view>
						</view>
					</view>
		
				</scroll-view>
				<view class="row-between-center"
					style="background-color: #f8f8f8;height: 100rpx;padding-left: 30rpx;padding-right: 30rpx;">
					<view class="cancel row-center" @click="showAvater = false">
						取消
					</view>
					<view class="sure row-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		saveInfo,
		getInfo,
		getBg
	} from '@/api/change/index.js'

	export default {
		data() {
			return {
				showAvater:false,
				showBirth: false,
				showInput: false,
				showBg: false,
				editInputIndex: 0,
				content: '',
				showSex: false,
				editInput: [{
						'title': '修改名字',
						'place': '输入新名字',
						'tip': '30天内可以修改1次',
						'limit': '20'
					},
					{
						'title': '修改账号',
						'place': '输入新账号',
						'tip': '每年只可以修改1次，本年度还可修改1次.',
						'limit': '20'
					},
				],
				editInputItem: {},
				sex: [{
						name: '不展示'
					},
					{
						name: '男'
					},
					{
						name: '女'
					},
				],
				birth: '',
				bgList:[]
			}
		},

		onLoad() {
			this.getInfo()
		},

		methods: {
			selectBg(){
				this.showBg = true
				getBg().then(res => {
					this.bgList = res.data
				})
			},
			selectBirth(e) {
				console.log('selectBirth', e)
				this.showBirth = false
			},
			selectClick(e) {
				this.showSex = false
			},
			showInputM(index) {
				this.editInputIndex = index
				this.editInputItem = this.editInput[this.editInputIndex]
				this.showInput = true
			},

			goback() {
				uni.navigateBack()
			},
			getInfo() {
				getInfo().then(res => {
					this.info = res.data
				})
			},
			saveInfo() {
				saveInfo(this.requestParams).then(res => {

				})
			}
		}
	}
</script>
<style>
	page {
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.info {

		border-radius: 30rpx 30rpx 0 0;

		height: 1200rpx;
		width: 100%;

		.content {
			padding: 15rpx 30rpx;
		}

		.close {
			width: 40rpx;
			height: 40rpx;
		}

		.title {
			font-weight: bold;
			color: #000;
			font-size: 48rpx;
		}

		.tip {
			color: #c3c3c3;
			font-size: 30rpx;
		}

		.cancel {
			border-radius: 60rpx;
			width: 200rpx;
			height: 80rpx;
			color: white;
			font-size: 32rpx;
			background-color: #4f4f4f;
		}

		.sure {
			border-radius: 60rpx;
			width: 200rpx;
			height: 80rpx;
			color: white;
			font-size: 32rpx;
			background-color: #bd3124;
		}

	}


	.padding {
		padding: 40rpx 100rpx;
	}

	.avater-box {
		position: relative;
		width: 240rpx;
		height: 240rpx;
		background-color: red;
	}

	.avater {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		background-color: blue;
	}

	.avater-camera {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
	}

	.key {
		color: rgba(108, 108, 108, 1);
		font-size: 40rpx;
	}

	.value {
		color: rgba(16, 16, 16, 1);
		font-size: 40rpx;
	}

	.arrow {
		width: 60rpx;
		height: 60rpx;
	}

	.bg-item {
		margin-top: 40rpx;
		width: 46%;
	}

	.bg-img {
		width: 85%;
		height: 522rpx;
		background-color: red;
	}

	.bg-radio {
		margin-top: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}
	
	.avater-item{
		margin-top: 2vw;
		width: 20vw;
		height: 20vw;
		background-color: red;
	}
	
	.grid{
		 display: grid;
		  grid-template-columns: 20vw 20vw 20vw 20vw 20vw;
		  grid-template-rows: 20vw 20vw 20vw 20vw;
		  background-color: red;
		  grid-gap: 20px 20px;
	}
	
</style>